<template>
  <div>
    <el-table :data="tableData"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{'text-align':'center'}"
      style="width: 100%">
      <el-table-column type="index">
      </el-table-column>
      <el-table-column prop="fileName"
        label="文件名"
        width="180px">
      </el-table-column>
      <el-table-column prop="size"
        label="文件大小"
        width="180px"
        :formatter="dealSize">
      </el-table-column>
      <el-table-column prop="upload_time"
        label="上传时间"
        width="180px"
        :formatter="dealTime">
      </el-table-column>
      <el-table-column prop="download"
        label="下载次数"
        width="180px">
      </el-table-column>
      <el-table-column prop="type"
        label="类型"
        width="180px">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a :href="getFile(scope.row)" target="_blank">
          <el-button size="mini"
            type="info"
            @click="handleDownload(scope.row)">下载</el-button>
          </a>
          <el-button size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    handleDelete (index, row) {
      this.$http
        .post(`/file/delete/`, {hashName: row.hashName, id: row.id, fileUrl: row.fileUrl}) // ${row.hash_name}/${row.id}
        .then(res => {
          this.$message.success(res.data.msg)
          this.refreshFileList()
        })
        .catch(err => {
          console.log('Error=>', err)
        })
    },
    // 下载
    handleDownload (data) {
      // 请求下载
      // this.$http
      //   .post('/file/download', data)
      //   .then(res => {
      //     console.log(res)
      // 定义一个form表单
      //   var form = document.createElement('form')
      //   form.style.display = 'none'
      //   form.target = '_blank'
      //   form.method = 'post'
      //   form.action = 'http://localhost:8061/file/download'// 此处填写文件下载提交路径
      //   var input1 = document.createElement('input')
      //   var input2 = document.createElement('input')
      //   input1.type = 'hidden'
      //   input2.type = 'hidden'
      //   input1.name = 'fileUrl'// 后台接收参数名
      //   input2.name = 'type'// 后台接收参数名
      //   input1.value = data.fileUrl
      //   input2.value = data.type
      //   document.body.append(form)// 将表单放置在web中
      //   form.append(input1)
      //   form.append(input2)
      //   form.submit()// 表单提交
      // })
      // 刷新列表
      setTimeout(() => {
        this.refreshFileList()
      }, 1000)
    },
    refreshFileList () {
      this.getFileList()
    },
    getFileList () {
      let params = {
        uid: sessionStorage.getItem('uid')
      }
      this.$http
        .post('/file/list', params)
        .then(res => {
          if (res.data.flag === 0) {
            this.$message.error(res.data.msg)
          } else {
            this.tableData = res.data.data
            console.log(this.tableData)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getFile (data) {
      let url = `http://localhost:8061/file/download?id=${data.id}`// ${data.id}/${sessionStorage.getItem('uid')}`
      return url
    },
    dealSize (row, column) {
      let fileSize = (row.size / 1024).toFixed(3)
      return `${fileSize}KB`
    },
    dealTime (row, column) {
      return this.formatTime(row.uploadTime)
    },
    formatTime (value) {
      var date = new Date(value)
      var Y = date.getFullYear()
      var M =
        date.getMonth() + 1 < 10
          ? `0${date.getMonth() + 1}`
          : date.getMonth() + 1
      var D = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
      var h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      var m =
        date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
      var s =
        date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
      return `${Y}-${M}-${D} ${h}:${m}:${s}`
    }
  },
  mounted () {
    this.getFileList()
  }
}
</script>
